*{
    margin: 0;
    padding: 0;
}
body{
    perspective: 8000px;
}
section{
    width: 300px;
    height: 200px;
    margin: 40px auto;
    background-size: cover;
    position: relative;
    transform-style: preserve-3d;
    transition: 20s linear;

}
section:hover{
    transform: rotateY(360deg);
}
section div img{
    width: 300px;
    height: 200px;
}
section div{
   background-size: cover;
   position: absolute;
   top: 0;
   left: 0;

}
section div:nth-child(1){
   transform: rotateY(0deg) translateZ(300px); 
}
section div:nth-child(2){
   transform: rotateY(60deg) translateZ(300px); 
}
section div:nth-child(3){
   transform: rotateY(120deg) translateZ(300px); 
}
section div:nth-child(4){
   transform: rotateY(180deg) translateZ(300px); 
}
section div:nth-child(5){
   transform: rotateY(240deg) translateZ(300px); 
}
section div:nth-child(6){
   transform: rotateY(300deg) translateZ(300px); 
} 
/* .row{
    border:1px solid #FFB31A;
    margin:0px 50px;
    display:flex;
}
.item{
    border:1px solid #FFB31A;
    height: 40px;
    line-height: 40px;
    text-align: center;
   
}
.item:hover{
    background-color: sandybrown;
    color: seashell;
}
.item:nth-child(1){
    width: 30%;
}

.item:nth-child(2),.item:nth-child(3){
    flex:1;    
}
.row:nth-child(2)>.item:nth-child(1){
    flex:3        
}
.row:nth-child(2)>.item:nth-child(2){
    flex:1
}

.row:nth-child(3)>.item:nth-child(1){
    flex:2        
}
.row:nth-child(3)>.item:nth-child(2){
    flex:3
}
.row:nth-child(3)>.item:nth-child(3){
    flex:1
}
.row:nth-child(3)>.item:nth-child(4){
    flex:3
}
.item:nth-child(4),.item:nth-child(1){
    flex:1;    
}
.row:nth-child(4)>.item:nth-child(2){
    flex:2       
}
.row:nth-child(4)>.item:nth-child(3){
    flex:1
} */
